<template>
  <div>
    <!-- 表格 -->
    <el-table :data="userArrayData" stripe style="width: 100%">
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        max-height="80px"
      >
      </el-table-column>
      <el-table-column
        prop="role_name"
        label="角色"
        width="180"
        max-height="80px"
      >
      </el-table-column>
      <el-table-column prop="email" label="邮箱" max-height="60px">
      </el-table-column>
      <el-table-column prop="mobile" label="电话" max-height="60px">
      </el-table-column>
      <el-table-column label="状态" max-height="40px">
        <!-- 开关 -->
        <template v-slot:default="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeUserState(scope.row.id, scope.row.mg_state)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" max-height="140px">
        <template v-slot:default="scope">
          <!-- 修改用户角色 -->
          <el-button
            type="info"
            icon="el-icon-s-custom"
            circle
            @click="showUserRole(scope.row)"
          ></el-button>
          <!-- 编辑用户 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="compileUserInfo(scope.row)"
          ></el-button>
          <!-- 删除用户 -->
          <el-popconfirm
            class="dele"
            title="要删除这个用户吗?此操作不可逆"
            @confirm="deleUser(scope.row.id)"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              slot="reference"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加用户显示按钮 -->
    <div class="toolsBox">
      <el-tag type="success" @click="showAddUser">添加用户</el-tag>
    </div>
    <!-- 分页插件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 5, 10, 20]"
      :page-size.sync="pageSize"
      :current-page.sync="pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="userAddData">
        <el-form-item label="用户名称">
          <el-input
            v-model="userAddData.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input
            v-model="userAddData.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="userAddData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户电话">
          <el-input v-model="userAddData.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserRequest">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog
      title="编辑
    用户"
      :visible.sync="dialogFormCompile"
    >
      <el-form :model="userAddData">
        <el-form-item label="用户名称">
          <el-input
            disabled
            v-model="userAddData.username"
            autocomplete="on"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input
            disabled
            v-model="userAddData.password"
            autocomplete="on"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="userAddData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户电话">
          <el-input v-model="userAddData.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormCompile = false">取 消</el-button>
        <el-button type="primary" @click="notarizeUserInfo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户角色对话框 -->
    <el-dialog
      title="编辑
    用户"
      :visible.sync="dialogFormRole"
    >
      <el-form :model="userAddData">
        <el-form-item label="用户名称">
          <el-input
            disabled
            v-model="userAddData.username"
            autocomplete="on"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="userAddData.role_name" placeholder="请选择">
            <el-option
              v-for="item in RoleDate"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormRole = false">取 消</el-button>
        <el-button type="primary" @click="toolsUserRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userArrayData: [],
      pageNum: 1,
      pageSize: 2,
      total: 0,
      dialogFormVisible: false, //添加用户对话框显示状态
      dialogFormCompile: false, //修改用户信息对话框显示状态
      dialogFormRole: false,
      userAddData: {
        //和修改用户共用
        //添加用户对象
        username: "",
        password: "",
        email: "",
        mobile: "",
        mg_state: null,
      },
      RoleDate: [], //角色数据
    };
  },
  mounted() {
    this.getUserData(this.pageNum, this.pageSize);
  },
  methods: {
    getUserData(pagenum, pagesize) {
      // 请求用户数据
      this.$req.get("/users", { params: { pagenum, pagesize } }).then((res) => {
        let {
          data: { data, meta },
        } = res;
        console.log(res);
        if (meta.status === 200) {
          this.userArrayData = data.users;
          this.total = data.total;
        }
      });
    },
    handleSizeChange(PageSize) {
      //显示条数
      this.getUserData(this.pageNum, PageSize);
    },
    handleCurrentChange(PageNum) {
      //页数
      this.getUserData(PageNum, this.pageSize);
    },
    showAddUser() {
      //打开添加用户对话框
      this.dialogFormVisible = true;
    },
    addUserRequest() {
      //发送添加用户请求
      let { username, password, email, mobile } = this.userAddData;
      this.$req
        .post("/users", { username, password, email, mobile })
        .then((res) => {
          let {
            data: { data, meta },
          } = res;
          // console.log(res);
          if (meta.status === 201) {
            this.$message.success(meta.msg);
            this.dialogFormVisible = false;
            this.getUserData(1, 2);
          }
        });
    },
    changeUserState(id, state) {
      // 更改用户状态
      // console.log(id, state);
      this.$req.put(`/users/${id}/state/${state}`).then((res) => {
        let {
          data: { data, meta },
        } = res;
        if (meta.status !== 200) {
          this.$message.error(meta.msg);
          this.getUserData(this.pageNum, this.pageSize);
        }
      });
    },
    compileUserInfo(scope) {
      // 打开用户信息对话框
      this.dialogFormCompile = true;
      console.log(scope);
      //和添加用户公用一个数据
      this.userAddData = scope;
    },
    notarizeUserInfo() {
      //发送编辑用户信息请求
      let { id, email, mobile } = this.userAddData;
      this.$req.put(`users/${id}`, { email, mobile }).then((res) => {
        let {
          data: { data, meta },
        } = res;
        if (meta.status !== 200) {
          this.$message.error(meta.msg);
          this.getUserData(this.pageNum, this.pageSize);
        }
        this.$message.success(meta.msg);
        this.dialogFormCompile = false;
      });
    },
    showUserRole(scope) {
      // 打开用户角色修改窗口,请求初始数据
      this.dialogFormRole = true;
      this.$req.get("/roles").then((res) => {
        this.userAddData = scope;
        this.RoleDate = res.data.data;
        console.log(this.RoleDate);
      });
    },
    toolsUserRole() {
      // 修改用户数据请求,发送更改数据
      let { id, role_name } = this.userAddData;
      // console.log(id,role_name);
      this.$req.put(`/users/${id}/role`, { rid: role_name }).then((res) => {
        let {
          data: { data, meta },
        } = res;
        if (meta.status !== 200) {
          this.$message.error(meta.msg);
          this.getUserData(this.pageNum, this.PageSize);
        } else if (meta.status === 200) {
          this.$message.success(meta.msg);
          this.getUserData(this.pageNum, this.pageSize);
        }

        this.dialogFormRole = false;
      });
    },
    // 删除用户
    deleUser(id) {
      this.$req.delete(`/users/${id}`)
      .then(res=>{
        let {data:{data,meta}} = res
        if(meta.status !== 200){
          this.$message.error(meta.msg)
        }else if(meta.status === 200){
          this.$message.success(meta.msg)
        }
      })
    },
  },
};
</script>

<style>
.el-main {
  line-height: 0;
}
.toolsBox {
  width: 100%;
  background: white;
  display: flex;
  justify-content: flex-start;
  padding: 5px 0;
  border: 1px inherit;
}
.el-tag {
  margin: 0 10px;
}
.dele {
  margin: 0 6px;
}
</style>